<script setup>

import {onMounted, ref} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "../../until/tool.js";

const typeName = ref(null)
const typeId = ref(0)
const typeData = ref([])
const listData = ref([])
onMounted(() => {
  getServiceData()
})
const getServiceData = async () => {
  typeData.value = []
  const res = await Http.newsType()
  res['Data'].map(value => {
    if (value.ParentId === 1) {
      if (typeData.value.length === 5) {
        return
      }
      typeData.value.push(value)
    }
  })
  if (typeId.value === 0) {
    typeName.value = typeData.value[0].TypeName;
    typeId.value = typeData.value[0].TypeId;
  }
  await getListData()
}

const getListData = async () => {
  const rbs = await Http.newsList({TypeId: typeId.value})
  listData.value = []
  rbs['Data'].forEach((d, index) => {
    if (index < 4) {
      listData.value.push({
        NewsImg: d.NewsImg,
        NewsTitle: d.NewsTitle,
        NewsDescription: d.NewsDescription
      })
    }
  })
}


const setTypeName = (data) => {
  typeName.value = data.TypeName;
  typeId.value = data.TypeId;
  getListData()
}


</script>

<template>
  <div class="one_bg">
    <h2 class="title text-align-center">—— 科研动态 ——</h2>
    <div class="serviceBox dynaBox wid">
      <div class="  tab text-20px wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s"
           style="margin-bottom: 25px; visibility: visible; animation-duration: 1s; animation-delay: 0s;">
        <ul>

          <li v-for="item of typeData" @click="setTypeName(item)" :class="typeName===item.TypeName?'cur':''">
            <div class="txt">{{ item.TypeName }}
              <div class="arrow"></div>
            </div>
            <div class="line"></div>
            <div class="dot"></div>
          </li>
        </ul>
      </div>

      <div class="conDZ wow animate__fadeInUp animate__animated" data-wow-delay="0s" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 0s;">
        <div class="list">
          <ul>

            <li v-for="item of listData">
              <div class="lib">
                <div class="picb"><a class="pic"> <img :src="getImgUrl(item.NewsImg)" :alt="item.NewsTitle"> </a></div>
                <div class="txtb font12">
                  <div class="txtT">
                    <!--<div class="cate"> <span>行业动态</span> </div>-->
                    <div class="name font16"><a href="/news"> {{ item.NewsTitle}}</a></div>
                    <div class="intro">{{item.NewsDescription}}···</div>
                  </div>
                  <div class="txtbot">
                    <div class="about"><span class="time"> 2024-03-09 </span></div>
                    <span class="view"> 101 </span></div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="btnMoreW"><a href="/news">查看更多&gt;&gt;</a></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.one_bg {
  padding:    4.7em 0 3.5em;
  height:     663px;
  background: url("../../assets/dyna_bg.jpg") no-repeat;
  }

.serviceBox .con { overflow: visible;}

.serviceBox .tab ul { margin-top: 2em; font-weight: bold;
  display:                        flex; justify-content: center; align-items: center;}

.serviceBox .tab ul li { padding: 0 1.7em 2.6em; position: relative; z-index: 0; color: #1f2c5c;}

.serviceBox .tab ul li .txt { cursor: pointer; line-height: 2.7; width: 8.3em; background-color: #fff; text-align: center;
  -moz-box-shadow:                    0 0 0.6em rgba(0, 0, 0, .1);
  -webkit-box-shadow:                 0 0 0.6em rgba(0, 0, 0, .1);
  box-shadow:                         0 0 0.6em rgba(0, 0, 0, .1);
  position:                           relative; z-index: 0;
  }

.serviceBox .tab ul li .arrow {position: absolute;
  bottom:                                -0.2em; margin-left: -0.5em; width: 0.7em; height: 0.7em;
  background-color:                      #fff; left: 50%;
  transform:                             rotate(45deg);
  -ms-transform:                         rotate(45deg); /* IE 9 */
  -webkit-transform:                     rotate(45deg); /* Safari and Chrome */
  -moz-box-shadow:                       0.6em 0.6em 0.6em rgba(0, 0, 0, .1);
  -webkit-box-shadow:                    0.6em 0.6em 0.6em rgba(0, 0, 0, .1);
  box-shadow:                            0.6em 0.6em 0.6em rgba(0, 0, 0, .1); }

.serviceBox .tab ul li .dot { position: absolute;bottom: 0;
  left:                                 50%; margin-left: -0.58em; background-color: #ccc;
  width:                                0.76em; height: 0.76em;
  border:                               2px solid #fff;
  -moz-border-radius:                   50%; -webkit-border-radius: 50%; border-radius: 50%;}

.serviceBox .tab ul li .line { position: absolute; height: 1px; bottom: 10px;
  width:                                 100%; left: 0; background-color: #ccc;}

.serviceBox .tab ul li:nth-child(1) .line {width: 50%; left: auto; right: 0;}

.serviceBox .tab ul li:last-child .line {width: 50%;}

.serviceBox .tab ul li.cur .txt { background-color: #1f2c5c; color: #fff;}

.serviceBox .tab ul li.cur .arrow { background-color: #1f2c5c;}

.serviceBox .tab ul li.cur .dot {background-color: #1f2c5c;}

.dynaBox .list ul { margin-top: 2em; display: flex; flex-wrap: wrap;
  justify-content:              flex-start; align-items: stretch; color: #999;}

.dynaBox .list ul li { margin-top: 2%; width: 49%; margin-right: 2%;
  background-color:                #fff;}

.dynaBox .list ul li:nth-child(2n) { margin-right: 0;}

.dynaBox .list ul li .lib { padding: 0.8em;
  display:                           flex; justify-content: flex-start; align-items: stretch;}

.dynaBox .list ul li .picb { width: 12.5em;}

.dynaBox .list ul li .pic { display: block; cursor: pointer;
  position:                          relative; z-index: 0;
  padding-top:                       67%; overflow: hidden;}

.dynaBox .list ul li .pic img { position: absolute; left: 0;
  top:                                    0; width: 100%; height: 100%; object-fit: cover;
  transition:                             all 0.5s;
  -webkit-transition:                     all 0.5s;}

.dynaBox .list ul li .pic:hover img {
  -ms-transform:     scale(1.03, 1.03);
  -webkit-transform: scale(1.03, 1.03);
  transform:         scale(1.03, 1.03);
  }

.dynaBox .list ul li .txtb { flex: 1; padding: 0.2em 0; margin-left: 1em; text-align: left;
  display:                         flex; flex-direction: column; justify-content: space-between; align-items: stretch;}

.dynaBox .list .name { font-weight: bold; color: #333; height: 1.5em; overflow: hidden;}

.dynaBox .list .intro { margin-top: 0.2em; height: 2.5em; line-height: 2em; text-overflow: ellipsis;
  display:                          -webkit-box;
  -webkit-box-orient:               vertical;
  -webkit-line-clamp:               2; overflow: hidden;}

.dynaBox .list .cate { margin-bottom: 0.2em;}

.dynaBox .list .txtbot {display: flex; justify-content: space-between; align-items: center;}

.dynaBox .list .time { padding-left: 1.2em;
  background:                        url(../../assets/time_2.png) 0 center no-repeat;
  background-size:                   1em auto; margin-right: 0.4em;}

.dynaBox .list .like { padding-left: 1.2em;
  background:                        url(../../assets/like.png) 0 center no-repeat;
  background-size:                   1em auto;margin-right: 0.4em;}

.dynaBox .list .fav { padding-left: 1.2em;
  background:                       url(../../assets/star_2.png) 0 center no-repeat;
  background-size:                  1em auto;margin-right: 0.4em;}

.dynaBox .list .view { padding-left: 1.4em;
  background:                        url(../../assets/view.png) 0 center no-repeat;
  background-size:                   1.2em auto;margin-right: 0.2em;}

.btnMoreW { background-color: #FFFFFF; width: 100px; padding: 10px; margin: 50px auto; margin-bottom: 0px;}

.btnMoreW a { color: #000000;}
</style>
